<#-- 话题内容 空白页 -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <#-- 获取令牌 -->
    <meta name="csrfToken" content="${token}"/>
    <@object action="${topicRelated_topicContent_1}" topicId="${url_topicId}">
        <#assign topic = topicRelated_topicContent_entityBean>
    </@object>

    <title><#if topic != null && topic?? >${topic.title}</#if> - ${title}</title>

    <base href="${baseURL}"/>

    <link href="${commonPath}css/common.css?12dd" rel="stylesheet" type="text/css"/>
    <link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
    <!--[if (IE 6)|(IE 7)|(IE 8)]>
    <script type="text/javascript" src="${commonPath}js/css3pie/PIE_IE678.js"></script>
    <![endif]-->
    <script type="text/javascript" src="${commonPath}js/tool.js"></script>
    <script type="text/javascript" src="${commonPath}js/ajax.js"></script>
    <script type="text/javascript" src="${commonPath}js/json2.js"></script>
    <script type="text/javascript" src="${commonPath}js/lodash.min.js"></script>
    <script type="text/javascript" src="${commonPath}js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="${commonPath}js/DPlayer/hls.min.js"></script>
    <script type="text/javascript" src="${commonPath}js/DPlayer/DPlayer.min.js"></script>

    <script type="text/javascript" src="${commonPath}js/jquery/jquery.letterAvatar.js"></script>
    <script type="text/javascript" src="${commonPath}js/kindeditor/kindeditor-min.js"></script>
    <link href="${commonPath}js/layer/skin/default/layer.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="${commonPath}js/layer/layer.js"></script>

    <link href="${commonPath}js/simplebox/css/simplebox.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="${commonPath}js/simplebox/js/simplebox.js"></script>

    <link href="${commonPath}js/prism/default-block/prism.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="${commonPath}js/prism/default-block/prism.js"></script>
    <script type="text/javascript" src="${commonPath}js/prism/default-block/clipboard.min.js"></script>


    <!--[if (IE 6)|(IE 7)|(IE 8)]>
    <script type="text/javascript">
        //让ie6/ie7/ie8支持自定义标签。这段代码必须放在页面头部<head>标签内
        (function() {
            var a = ['hide'/* 其他HTML5元素 */];
            for (var i = 0, j = a.length; i < j; i++) {
                document.createElement(a[i]);
            }
        })();
    </script>
    <![endif]-->
</head>
<body>
<#-- 引入页头 -->
<@include action="${newPublic_2}"/>

<div class="skeleton">
    <div class="main">
        <#if topic != null && topic?? >
            <div class="topicContentModule card">
                <div class="left">
                    <div class="topic-wrap card">
                        <div class="topicTag">
                            <a href="?tagId=${topic.tagId}" class="tag">${topic.tagName}</a>
                        </div>
                        <#if topic.userName == systemUser.userName>
                            <div class="editTopic">
                                <a href="user/editTopic?topicId=${topic.id}"><i class="cms-pencil-alt"></i>编辑</a>
                            </div>
                        </#if>
                        <div class="topicBox">
                            <div class="title">
                                ${topic.title}
                                <#if topic.essence == true>
                                    <span class="essence">精华</span>
                                </#if>
                                <#if topic.sort gt 0>
                                    <span class="top">置顶</span>
                                </#if>
                            </div>
                            <div class="topicInfo clearfix">
                                <div class="postTime">${topic.postTime}</div>
                                <div class="viewTotal-icon"><i class="cms-view"></i></div>
                                <div class="viewTotal">${topic.viewTotal}次阅读</div>
                                <div class="comment-icon"><i class="cms-commentCount"></i></div>
                                <div class="comment">${topic.commentTotal}个评论</div>
                            </div>
                            <!-- topicId属性用来支持JS获取隐藏内容 -->
                            <div class="topicContent" topicId="${topic.id}">

                                <#noescape>${topic.content}</#noescape>

                                <!--
                                <div class="hide-box">
                                    <div class="background-image"></div>

                                    <div class="background-prompt">此处内容已被隐藏，输入密码可见</div>
                                    <div class="input-box">
                                        <input type="password" id="hide_password" class="text" maxlength="30"  placeholder="密码" value="">
                                        <input type="button" value="提交" class="button" onclick="search();return false">
                                    </div>
                                    -->
                                <!--
                                <div class="background-prompt">此处内容已被隐藏，评论话题可见</div>
                                -->
                                <!--
                                <div class="background-prompt">此处内容已被隐藏，达到‘新手上路’等级可见</div>
                                -->
                                <!--
                                <div class="background-prompt">此处内容已被隐藏，需要 50 积分购买可见</div>
                                <div class="submit-box">
                                    <input type="button" value="立即购买" class="button" onclick="search();return false">
                                </div>
                                -->
                                <!--
                                <div class="background-prompt">此处内容已被隐藏，需要 50 人民币购买可见</div>
                                <div class="submit-box">
                                    <input type="button" value="立即购买" class="button" onclick="search();return false">
                                </div>
                                -->

                                <!--
                            </div>-->
                            </div>

                            <div class="favorite-formModule">
                                <#--加入收藏夹-->
                                <@include action="${favoriteRelated_addFavorite_1}"/>

                                <#--给话题点赞-->
                                <@include action="${likeRelated_addLike_1}"/>
                            </div>
                        </div>
                    </div>

                    <#-- 引入话题取消隐藏 本方法处理话题隐藏内容 -->
                    <@include action="${topicRelated_topicUnhide_1}"/>

                    <#-- 引入评论列表 -->
                    <@include action="${topicRelated_comment_2}"/>

                    <#if topic.allow == true><#-- 允许评论 -->
                    <#-- 引入添加评论 -->
                        <@include action="${topicRelated_addComment_1}"/>
                    <#else><#-- 不允许评论 -->
                        <div class="addCommentModule">
                            <div class="respond">
                                <p style="font-size:13px;padding:8px;text-align:center;background:#eee;overflow:hidden">
                                    评论已关闭
                                </p>
                            </div>
                        </div>
                    </#if>
                </div>

                <div class="right">
                    <div class="userInfo-wrap clearfix card">
                        <div class="userInfo">
                            <div class="author">
                                <a href="user/control/home?userName=${topic.userName}">
                                    <#if topic.avatarName != null>
                                        <img src="${topic.avatarPath}${topic.avatarName}">
                                    <#else>
                                        <!--[if (IE)]><img src="${commonPath}images/min_avata.png"><![endif]-->
                                        <!--[if !(IE)]><!--><img
                                            avatar="${(topic.nickname != null && topic.nickname??) ?string(topic.nickname , topic.userName)}"><!--<![endif]-->
                                    </#if>
                                </a>
                            </div>
                            <p class="name">
                                <a href="user/control/home?userName=${topic.userName}" target="_self">
                                    ${(topic.nickname != null && topic.nickname??) ?string(topic.nickname , topic.userName)}
                                </a>
                            </p>

                            <div style="text-align: center;margin: 10px  auto">
                                ${topic.remarks}
                            </div>

                            <#if topic.userRoleNameList?size gt 0>
                                <div class="role">
                                    <#list topic.userRoleNameList as roleName>
                                        <i class="userRoleName">${roleName}</i>
                                    </#list>
                                </div>
                            </#if>
                            <#if topic.isStaff>
                                <div class="role">
                                    <i class="staff">官方人员</i>
                                </div>
                            </#if>
                            <ul>
                                <li>
                                    <span id="answerCount">0</span>
                                    <span>回答</span>
                                </li>
                                <li>
                                    <span id="followerCount">0</span>
                                    <span>粉丝</span>
                                </li>
                                <li>
                                    <span id="followCount">0</span>
                                    <span>关注</span>
                                </li>
                                <input type="hidden" id="_userName" value="${topic.userName}"/>

                                <script type="text/javascript">
                                    //查询回答总数
                                    function queryAnswerCount() {
                                        //获取用户名称
                                        var userName = document.getElementById("_userName").value;
                                        get_request(function (value) {
                                            if (value != "") {
                                                var data = JSON.parse(value);
                                                document.getElementById("answerCount").innerHTML = data;
                                            }
                                        },
                                            "queryAnswerCount.htm?userName=" + userName + "&timestamp=" + new Date().getTime(), true);
                                    }

                                    queryAnswerCount();

                                    //查询粉丝总数
                                    function queryFollowerCount() {
                                        //获取用户名称
                                        var userName = document.getElementById("_userName").value;
                                        get_request(function (value) {
                                            if (value != "") {
                                                var data = JSON.parse(value);
                                                document.getElementById("followerCount").innerHTML = data;
                                            }
                                        },
                                            "queryFollowerCount.htm?userName=" + userName + "&timestamp=" + new Date().getTime(), true);
                                    }

                                    queryFollowerCount();


                                    //查询关注总数
                                    function queryFollowCount() {
                                        //获取用户名称
                                        var userName = document.getElementById("_userName").value;
                                        get_request(function (value) {
                                            if (value != "") {
                                                var data = JSON.parse(value);
                                                document.getElementById("followCount").innerHTML = data;
                                            }
                                        },
                                            "queryFollowCount.htm?userName=" + userName + "&timestamp=" + new Date().getTime(), true);
                                    }

                                    queryFollowCount();
                                </script>


                            </ul>
                            <#if !topic.isStaff>
                                <div class="action-button">
                                    <#-- 引入关注用户 -->
                                    <@include action="${followRelated_addFollow_3}"/>
                                    <span class="privateMessageBox">
									<button type="button" class="privateMessageButton"
                                            onClick="javascript:window.location.href='${baseURL}user/control/privateMessageChatList?friendUserName=${topic.userName}'">发私信</button>
								</span>
                                </div>
                            </#if>
                        </div>
                    </div>

                    <#-- 引入红包 -->
                    <@include action="${redEnvelopeRelated_giveRedEnvelopeContent_1}" giveRedEnvelopeId="${topic.giveRedEnvelopeId}"/>


                    <#-- 引入相似问题 -->
                    <@include action="${topicRelated_likeTopic_1}" topicId="${topic.id}"/>

                </div>
            </div>
        </#if>
    </div>
</div>
<#-- 引入页脚 -->
<@include action="${newPublic_3}"/>

</body>
<!-- 代码高亮显示 -->
<script type="text/javascript">
    //代码语言类
    function languageClassName(originalClass, newClass) {
        var o = new Object()
        o.originalClass = originalClass;//原始样式标签名称
        o.newClass = newClass;//新样式标签名称
        return o;
    }

    $(document).ready(function () {
        //代码语言映射集合
        var languageMapping_arr = new Array();
        var languageClassName_xml = languageClassName("lang-xml", "language-xml");
        languageMapping_arr.push(languageClassName_xml);
        var languageClassName_css = languageClassName("lang-css", "language-css");
        languageMapping_arr.push(languageClassName_css);
        var languageClassName_html = languageClassName("lang-html", "language-html");
        languageMapping_arr.push(languageClassName_html);
        var languageClassName_js = languageClassName("lang-js", "language-JavaScript");
        languageMapping_arr.push(languageClassName_js);
        var languageClassName_java = languageClassName("lang-java", "language-java");
        languageMapping_arr.push(languageClassName_java);
        var languageClassName_pl = languageClassName("lang-pl", "language-perl");
        languageMapping_arr.push(languageClassName_pl);
        var languageClassName_py = languageClassName("lang-py", "language-python");
        languageMapping_arr.push(languageClassName_py);
        var languageClassName_rb = languageClassName("lang-rb", "language-ruby");
        languageMapping_arr.push(languageClassName_rb);
        var languageClassName_go = languageClassName("lang-go", "language-Go");
        languageMapping_arr.push(languageClassName_go);
        var languageClassName_cpp = languageClassName("lang-cpp", "language-C++");
        languageMapping_arr.push(languageClassName_cpp);
        var languageClassName_cs = languageClassName("lang-cs", "language-C#");
        languageMapping_arr.push(languageClassName_cs);
        var languageClassName_bsh = languageClassName("lang-bsh", "language-Bash + Shell");
        languageMapping_arr.push(languageClassName_bsh);


        var doc_pre = $(".topicContent,.commentContent").find('pre[class^="prettyprint"]');
        doc_pre.each(function () {
            var class_val = $(this).attr('class');
            var lan_class = "";
            var class_arr = new Array();
            class_arr = class_val.split(' ');
            for (var i = 0; i < class_arr.length; i++) {
                var className = $.trim(class_arr[i]);

                if (className != null && className != "") {
                    if (className.lastIndexOf('lang-', 0) === 0) {
                        lan_class = className;
                        break;
                    }
                }
            }

            for (var i = 0; i < languageMapping_arr.length; i++) {
                var languageMapping = languageMapping_arr[i];
                if (languageMapping.originalClass == lan_class) {
                    //	var pre_content = '<code>'+$(this).html()+'</code>';
                    $(this).html($(this).html());
                    $(this).attr("class", 'line-numbers ' + languageMapping.newClass);
                }
            }
            if (lan_class == "") {
                //	var pre_content = '<code>'+$(this).html()+'</code>';
                $(this).html($(this).html());
                $(this).attr("class", 'line-numbers language-markup');
            }
        });
    });
</script>

<script type="text/javascript">
    // 获取随机数
    function getRandom(m) {
        //生成的随机数截取m位，生成的随机数最大不超过13位，能保证首位不为0
        m = m > 13 ? 13 : m;
        var num = Math.random().toString();
        if (num.substr(num.length - m, 1) === '0') {
            return getRandom(m);
        }
        return num.substring(num.length - m);
    }

    //设置播放器标签
    function setPlayerTag() {
        //获取<player>标签属性
        $(".topicContent").find("player").each(function () {
            var random = getRandom(13);

            var id = "player_" + random;
            var url = $(this).attr("url");
            var cover = $(this).attr("cover");//封面
            var thumbnail = $(this).attr("thumbnail");//缩略图
            //设置Id
            $(this).attr("id", id);

            if (url == "") {//如果视频处理中
                var dp = new DPlayer({
                    container: document.getElementById(id),//播放器容器元素
                    screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
                    video: {}
                });
                insertProcess(id);
            } else {
                if (cover != undefined && cover != "" && thumbnail != undefined && thumbnail != "") {//切片视频
                    var dp = new DPlayer({
                        container: document.getElementById(id),//播放器容器元素
                        screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
                        hotkey: true,
                        video: {
                            url: url,
                            type: 'hls',
                            pic: cover,//视频封面
                            thumbnails: thumbnail//视频预览图
                        }
                    });
                } else {
                    var dp = new DPlayer({
                        container: document.getElementById(id),//播放器容器元素
                        screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域

                        video: {
                            url: url
                        }
                    });

                }


            }

        })

    }

    //插入处理提示层
    function insertProcess(id) {
        $("#" + id).prepend("<div class='dplayer-process'><div class='box'><div class='prompt'>视频处理中，请稍后再刷新</div></div></div>");
    }

    $(document).ready(function () {
        setPlayerTag();
    });
</script>

<!-- 图片点击放大 -->
<script type="text/javascript">
    $(function () {
        //图片不含宽度的元素,因为svg表情不放大，svg表情后端默认设置了宽度
        $(".topicContent img:not([width]),.commentContent img:not([width])").simplebox();

        //	$(".topicContent img,.commentContent img").simplebox();
    });
</script>
</html>

